<!DOCTYPE html>
<html lang="en">
<head>
    <title>管理员登录</title>
<style type="text/css">
body {
    padding-top: 130px;
    padding-bottom: 40px;
    background-size: cover;
    background: url(/static/images/banner_04.jpg) no-repeat fixed center;
}

.container{
    max-width: 420px;
    margin: 0 auto 15px;
    box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
    0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
    padding: 30px 29px 10px 29px;
    background-color: rgba(236, 241, 248, 0.56);
}
.radio {
    padding-top: 10px;
    padding-bottom:10px;
    font-size: 15px;
}

.form-signin-heading{
    text-align: center;
}

.form-signin {
    max-width: 380px;
    padding: 19px 29px 0px;
    margin: 0 auto 20px;
    text-align: center;
    border: 2px solid #e5e5e5;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
    margin-bottom: 20px;
}
.form-signin input[type="text"],
.form-signin input[type="password"] {
    width: 280px;
    font-size: 16px;
    height: auto;
    margin-bottom: 15px;
    padding: 7px 9px;
    border-radius: 10px;
    border-color: rgba(255, 255, 255, 0.42);
    background-color: rgba(229, 229, 229, 0.42);
}
.login_btn{
    align-content: center;
    margin-top: 20px;
    width: 280px;
    height: 40px;
    margin-bottom: 15px;
    border-color: rgba(255, 255, 255, 0.42);
    border-radius: 10px;
    font-size: 15px;
    background-image: linear-gradient(to right bottom , #c0f6ee, #ffffff, #ffffff, #dee9fc);
}
#nameMassage,#passwordMassage{
    color: red;
    font-size: 15px;
    margin-bottom: 10px;
}
</style>
    <script src="/static/js/jquery.js"></script>
    <script>
        $(document).ready(function () {
            $("#adminName").blur(function () {
                var adminName = $("#adminName").val();
                if (adminName=="") {
                    $("#nameMassage").html("用户名不能为空！");
                }else {
                    $("#nameMassage").html("");
                }
            });
            $("#adminPassword").blur(function () {
                var adminPassword = $("#adminPassword").val();
                if (adminPassword=="") {
                    $("#passwordMassage").html("密码不能为空！");
                }else {
                    $("#passwordMassage").html("");
                }
            });
            $('#login_btn').click(function () {
                const adminName = $("#adminName").val();
                const adminPassword = $("#adminPassword").val();
                let res;
                // alert(adminName + " " + adminPassword)

                if (adminName==""||adminPassword==""){
                    alert("用户名或密码不能为空！");
                    return false;
                }else {
                    $.ajax({
                        url:'login',
                        method:'post',
                        async:false,
                        data:{'adminName':adminName,'adminPassword':adminPassword},
                        success:function (data) {
                            res=data;
                            // alert(res)
                        }
                    });
                    if (res==0){
                        alert("用户名或密码错误！");
                        return false;
                    }else {
                        window.location.href="adminIndex"
                    }
                };

            });
        });
    </script>
</head>
<body>

<div class="container">
    <form name="myForm" class="form-signin"  method="post" id="loginFormId">
        <h2 class="form-signin-heading">管理员登录</h2>
        <input id="adminName" name="admin_name"  type="text" class="input-block-level" placeholder="用户名..."><br><span id="nameMassage" ></span><br>
        <input id="adminPassword" name="admin_password"  type="password" class="input-block-level" placeholder="密码..." ><br><span id="passwordMassage" ></span><br>

        &nbsp;&nbsp;&nbsp;<a href="toForgotPasswordPage" style="text-decoration: none" id="forgetPwd">忘记密码？</a>&nbsp;&nbsp;&nbsp;
        <br>
        <button  class="login_btn" type="button" id="login_btn" >登录</button>
    </form>
</div>
</body>
</html>